<template>
    <div>
        <el-row class="margin-left-48">
            <el-col :span="12">
                <el-row>
                    <div class="screen-data-title">本科生报到人数</div>
                </el-row>
                <el-row class="margin-top-16">
                    <div
                        class="screen-data-number screen-undergraduate-color"
                    >{{formData.undergraduateRegisterCount[0]}}</div>
                    <div
                        class="screen-data-number screen-undergraduate-color margin-left-16"
                    >{{formData.undergraduateRegisterCount[1]}}</div>
                    <div
                        class="screen-data-number screen-undergraduate-color margin-left-16"
                    >{{formData.undergraduateRegisterCount[2]}}</div>
                    <div
                        class="screen-data-number screen-undergraduate-color margin-left-16"
                    >{{formData.undergraduateRegisterCount[3]}}</div>
                    <div class="screen-student-sum">
                        <span class="screen-title-02">总人数</span>
                        <div
                            class="screen-student-sum-val screen-undergraduate-color"
                        >{{formData.undergraduateTotalCount}}</div>
                    </div>
                    <div class="screen-student-rate">
                        <span class="screen-title-02">报到率</span>
                        <div
                            class="screen-student-rate-val screen-undergraduate-color"
                        >{{formData.undergraduateRegisterRate | percentage}}</div>
                    </div>
                </el-row>
                <el-row style="margin-top: 40px">
                    <div class="screen-data-title">研究生报到人数</div>
                </el-row>
                <el-row class="margin-top-16">
                    <div
                        class="screen-data-number screen-postgraduate-color"
                    >{{formData.postgraduateRegisterCount[0]}}</div>
                    <div
                        class="screen-data-number screen-postgraduate-color margin-left-16"
                    >{{formData.postgraduateRegisterCount[1]}}</div>
                    <div
                        class="screen-data-number screen-postgraduate-color margin-left-16"
                    >{{formData.postgraduateRegisterCount[2]}}</div>
                    <div
                        class="screen-data-number screen-postgraduate-color margin-left-16"
                    >{{formData.postgraduateRegisterCount[3]}}</div>
                    <div class="screen-student-sum">
                        <span class="screen-title-02" style="line-height:56px">总人数</span>
                        <div
                            class="screen-student-sum-val screen-postgraduate-color"
                        >{{formData.postgraduateTotalCount}}</div>
                    </div>
                    <div class="screen-student-rate">
                        <span class="screen-title-02" style="line-height:56px">报到率</span>
                        <div
                            class="screen-student-rate-val screen-postgraduate-color"
                        >{{formData.postgraduateRegisterRate | percentage}}</div>
                    </div>
                </el-row>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <div class="screen-data-title">本研分时统计</div>
                    <div class="screen-chart margin-top-16" id="studentChart"></div>
                </el-row>
                <el-row>
                    <div style="clear:both">
                        <div style="float:left;width:160px;margin-top:20px;margin-bottom:12px">
                            <div class="screen-area-title">四平路校区</div>
                            <div class="screen-area-one"></div>
                        </div>
                        <div class="screen-area-precent-container">
                            <span class="screen-area-precent-text">本科生</span>
                            <el-progress
                                class="screen-area-precent undergraduate-progress"
                                :stroke-width="16"
                                :percentage="formData.undergraduateRegisterRateB*100"
                                :show-text="false"
                            ></el-progress>
                            <span
                                class="screen-area-precent-val"
                            >{{formData.undergraduateRegisterRateB | percentage}}</span>
                        </div>
                        <div class="screen-area-precent-container">
                            <span class="screen-area-precent-text">研究生</span>
                            <el-progress
                                class="screen-area-precent postgraduate-progress"
                                :stroke-width="16"
                                :percentage="formData.postgraduateRegisterRateB*100"
                                :show-text="false"
                            ></el-progress>
                            <span
                                class="screen-area-precent-val"
                            >{{formData.postgraduateRegisterRateB | percentage}}</span>
                        </div>
                    </div>
                    <div style="clear:both">
                        <div style="float:left;width:160px;margin:20px 0 12px 0">
                            <div class="screen-area-title">嘉定校区</div>
                            <div class="screen-area-one"></div>
                        </div>
                        <div class="screen-area-precent-container">
                            <span class="screen-area-precent-text">研究生</span>
                            <el-progress
                                class="screen-area-precent postgraduate-progress"
                                :stroke-width="16"
                                :percentage="formData.postgraduateRegisterRateA*100"
                                :show-text="false"
                            ></el-progress>
                            <span
                                class="screen-area-precent-val"
                            >{{formData.postgraduateRegisterRateA | percentage}}</span>
                        </div>
                    </div>
                    <div style="clear:both">
                        <div style="float:left;width:160px;margin:20px 0 12px 0">
                            <div class="screen-area-title">沪西校区</div>
                            <div class="screen-area-one"></div>
                        </div>
                        <div class="screen-area-precent-container">
                            <span class="screen-area-precent-text">研究生</span>
                            <el-progress
                                class="screen-area-precent postgraduate-progress"
                                :stroke-width="16"
                                :percentage="formData.postgraduateRegisterRateC*100"
                                :show-text="false"
                            ></el-progress>
                            <span
                                class="screen-area-precent-val"
                            >{{formData.postgraduateRegisterRateC | percentage}}</span>
                        </div>
                    </div>
                </el-row>
            </el-col>
        </el-row>
        <el-row style="position:relative;" v-if="formData.totalRegisterRate>0.1">
            <!-- 同济大学logo and 照片墙 -->
            <div
                class="screen-pic-wall-highlight float-left"
                id="picWallHighlight"
                :style="{width:parseInt(1920*formData.totalRegisterRate)+'px'}"
            >
                <div
                    class="screen-pic-wall-progress-text"
                >{{formData.totalRegisterRate | percentage}}</div>
                <div class="screen-pic-wall-progress"></div>
            </div>
            <div
                class="screen-pic-wall float-left"
                id="picWallGray"
                :style="{width:(1920-parseInt(1920*formData.totalRegisterRate))+'px'}"
            ></div>
        </el-row>
        <el-row v-else>
            <div class="screen-pic-wall float-left" id="picWallGray"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
import screenApi from 'common/src/api/screen'
import filters from 'common/src/filters'
export default {
    name: 'All',
    props: ['colors'],
    data() {
        return {
            formData: {
                undergraduateRegisterCount: '0000',
                postgraduateRegisterCount: '0000',
                postgraduateTotalCount: 0,
                postgraduateRegisterRate: 0,
                postgraduateRegisterRateA: 0,
                postgraduateRegisterRateB: 0,
                postgraduateRegisterRateC: 0,
                undergraduateTotalCount: 0,
                undergraduateRegisterRate: 0,
                undergraduateRegisterRateA: 0,
                undergraduateRegisterRateB: 0,
                undergraduateRegisterRateC: 0,
                totalRegisterRate: 0,
                xAxisKey: [],
                xAxisData1: [],
                xAxisData2: []
            }
        }
    },
    filters: {
        percentage(rate) {
            return filters.percentage(rate)
        }
    },
    methods: {
        renderChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('studentChart'))
            // 指定图表的配置项和数据
            myChart.setOption({
                xAxis: {
                    show: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    data: this.formData.xAxisKey,
                    axisLabel: {
                        color: '#7795b1'
                    }
                },
                yAxis: {
                    show: false,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    {
                        type: 'bar',
                        data: this.formData.xAxisData1,
                        barWidth: '16px',
                        stack: 'aaaaa',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: this.colors.undergraduate.color0
                                    },
                                    {
                                        offset: 1,
                                        color: this.colors.undergraduate.color1
                                    }
                                ]),
                                //柱形图圆角，初始化效果
                                barBorderRadius: [0, 0, 7, 7]
                            }
                        }
                    },
                    {
                        type: 'bar',
                        data: this.formData.xAxisData2,
                        barWidth: '16px',
                        stack: 'aaaaa',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                color: '#c4cce3',
                                formatter: params => {
                                    return (
                                        Number(this.formData.xAxisData1[params.dataIndex]) +
                                        Number(this.formData.xAxisData2[params.dataIndex])
                                    )
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: this.colors.postgraduate.color0
                                    },
                                    {
                                        offset: 1,
                                        color: this.colors.postgraduate.color1
                                    }
                                ]),
                                //柱形图圆角，初始化效果
                                barBorderRadius: [7, 7, 0, 0]
                            }
                        }
                    }
                ]
            })
        },
        changeBackendData(data) {
            let formData = data
            // 本科生报到人数
            formData.undergraduateRegisterCount = String(data.undergraduateRegisterCount).padStart(
                4,
                '0'
            )
            // 研究生报到人数
            formData.postgraduateRegisterCount = String(data.postgraduateRegisterCount).padStart(
                4,
                '0'
            )

            // 本研分时统计图表
            formData.xAxisKey = []
            formData.xAxisData1 = []
            formData.xAxisData2 = []

            for (let item of data.registerDayList) {
                formData.xAxisKey.push(item.hourKey)
                formData.xAxisData1.push(item.underRegisterCounts)
                formData.xAxisData2.push(item.postRegisterCounts)
            }
            return formData
        },
        init() {
            screenApi
                .findStudentRegisterInfo(1)
                .then(
                    response => {
                        if (response.code === 200) {
                            this.formData = this.changeBackendData(response.data)
                            this.renderChart()
                        }
                    },
                    error => {
                        // 数据保存为上一次请求的数据。
                    }
                )
                .catch(error => {
                    // 数据保存为上一次请求的数据。
                })
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.screen-student-rate {
    float: left;
    margin-left: 16px;
    height: 128px;
    width: 182px;
}

.screen-student-sum {
    float: left;
    margin-left: 32px;
    height: 128px;
    width: 168px;
}

.screen-pic-wall-highlight {
    position: relative;
    background: url('/static/images/screen/process02.png');
    background-position: center left;
    background-repeat: no-repeat;
    width: 0px;
    height: 380px;
}

.screen-pic-wall-progress-text {
    font-size: 30px;
    color: #16b6c2;
    position: absolute;
    bottom: 4px;
    right: 0px;
}
.screen-pic-wall-progress {
    height: 4px;
    background-color: #2876c2;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.screen-pic-wall {
    background: url('/static/images/screen/process01.png');
    background-position: center right;
    background-repeat: no-repeat;
    width: 1920px;
    height: 380px;
}

.screen-area {
    width: 120px;
    height: 4px;
    background-position: center;
    background-repeat: no-repeat;
}

.screen-area-one {
    @extend .screen-area;
    margin-top: 12px;
    background: url('/static/images/screen/bg_area01.png');
}

.screen-area-two {
    @extend .screen-area;
    margin-top: 30px;
    background: url('/static/images/screen/bg_area02.png');
}

.screen-area-title {
    color: #c4cce3;
    font-size: 24px;
}

.screen-area-precent {
    float: left;
    width: 500px;
    margin-top: 8px;
    margin-left: 24px;
    margin-right: 15px;
}
.screen-area-precent-text {
    float: left;
    font-size: 20px;
    color: #7795b1;
}
.screen-area-precent-val {
    float: left;
    font-size: 20px;
    color: #c4cce3;
}
.screen-area-precent-container {
    float: left;
    width: 752px;
    text-align: center;
    margin-top: 22px;
}
</style>
